import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import logo from '../../assets/images/logo.png'
import {
  MailOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import './index.less'

export default class LeftNav extends Component {


  render() {
    function getItem(label, key, icon, children, type) {
      return {
        key,
        icon,
        children,
        label,
        type,
      };
    }

    const items = [
      getItem('首页', '/home', <PieChartOutlined />),
      getItem('商品', '/product', <MailOutlined />, [
        getItem('品类管理', '/category', <MailOutlined />),
        getItem('商品管理', '3', <MailOutlined />),
      ]),
      getItem('用户管理', '4', <PieChartOutlined />),
      getItem('角色管理', '5', <PieChartOutlined />),
      getItem('图形图表', 'sub2', <MailOutlined />, [
        getItem('柱状图', '6', <MailOutlined />),
        getItem('折线图', '7', <MailOutlined />),
      ]),

    ];

    return (
      <div className='left-nav'>
        <Link to='/' className='left-nav-header'>
          <img src={logo} alt="logo" />
          <h1>硅谷后台</h1>
        </Link>

        <Menu
          defaultSelectedKeys={['4']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          // inlineCollapsed={collapsed}
          items={items}
        />


      </div>
    )
  }
}
